<template>
	<view class="detail">
		<!-- <image :src="'http://124.93.196.45:10001'+detail.imgUrl" style="width: 100%;"></image> -->
		<u-parse :content="detail.content"></u-parse>
		<text style="font-size: 28px; color: red;">活动报名</text>
		<u-button type="error" :text="show" style="margin-top: 20px; margin-bottom: 20px;"
		 :disabled="key1" @click="bao"></u-button>
		<text style="font-size: 28px; color: red;">活动评论</text>
		<view class="d2">
			<view class="d1">
				<textarea placeholder="请输入评论内容" v-model="value"></textarea>
				<u-button text="发表" color="#00c3c3" @click="addcomment"></u-button>
			</view>
			<u-button type="error" text="查看评论" style="width: 100px; 
			float: right; margin-top: 20px;" @click="key2=true"></u-button>
		</view>
		
		<view class="d3" style="margin-top: 70px;" v-show="key2">
			<text style="font-size: 28px; color: red;">评论列表</text>
			<view class="d4" style="margin-top: 10px; margin-left: 240px;">
				<text style="font-size: 19px;">评论数量：{{number}}</text>
			</view>
			<u-button type="primary" text="查看评论" style="margin-top: 20px;" @click="key3=true,getlist(),key4=false" v-show="key4"></u-button>
		</view>
		<view v-show="key3">
			<view class="d5" v-for="item in list">
				<view class="d6">
					<u-avatar :src="'http://124.93.196.45:10001'+item.avatar"></u-avatar>
					<view class="d7" style="margin-left: 10px;">
						<text>{{item.nickName}}:</text>
						<text>{{item.content}}</text>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>
		<view class="t1" v-for="item in tuijian" @click="tonext(item.id)">
			<image :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
			<view class="t3">
				<text>{{item.name}}</text>
			</view>
			<view class="t2">
				<text>报名人数：{{item.signupNum}}</text>
				<text>点赞数：{{item.likeNum}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{},
				key1:false,
				show:'报名',
				value:'',
				number:0,
				list:[],
				key2:false,
				key3:false,
				key4:true,
				tuijian:[]
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getdetail()
			this.baoming()
			this.getnumber()
			this.gettuijian()
		},
		methods: {
			getdetail(){
				this.api.get('/prod-api/api/activity/activity/'+this.id).then(res=>{
					this.detail=res.data.data
					uni.setNavigationBarTitle({
						title:res.data.data.name
					})
				})
			},
			baoming(){
				this.api.get('/prod-api/api/activity/signup/check?activityId='+this.id).then(res=>{
					if(res.data.isSignup){
						this.key1=true
						this.show=res.data.msg
					}
				})
			},
			bao(){
				const data={
					activityId:this.id
				}
				this.api.get('/prod-api/api/activity/signup','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'报名成功'
							})
						},700)
						this.baoming()
					}else{
						uni.showToast({
							title:'失败',
							icon:'error'
						})
					}
				})
			},
			getnumber(){
				this.api.get('/prod-api/api/activity/comment/number?activityId='+this.id).then(res=>{
					this.number=res.data.commentNum
				})
			},
			getlist(){
				this.api.get('/prod-api/api/activity/comment/list?activityId='+this.id).then(res=>{
					this.list=res.data.rows
				})
			},
			addcomment(){
				if(this.value===''){
					uni.showToast({
						title:'内容为空',
						icon:'error'
					})
					return
				}
				const data={
					activityId:this.id,
					content:this.value
				}
				this.api.get('/prod-api/api/activity/comment','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'发表成功'
							})
						},700)
						this.getnumber()
						this.getlist()
					}else{
						uni.showToast({
							title:'失败',
							icon:'error'
						})
					}
					this.value=''
				})
			},
			gettuijian(){
				this.api.get('/prod-api/api/activity/activity/list?recommend=Y').then(res=>{
					this.tuijian=res.data.rows
				})
			},
			tonext(id){
				uni.navigateTo({
					url:'/pages/other/active/activedetail/activedetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.d2{
	width: 290px;
	height: 170px;
	border: 3px solid #ccc;
	margin: 20px auto;
}
.d6{
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
	
	.d7{
		display: flex;
		text-align: center;
	}
}
.t1{
	margin-top: 30px;
	margin-bottom: 20px;
	line-height: 30px;
	image{
		width: 100%;
		height: 150px;
	}
	.t3{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.t2{
		display: flex;
		justify-content: space-between;
	}
}
</style>
